<template>
	<div>
    <!-- <div class="container"> -->
		<div class="handle-box">
			<label class="label" >名称：</label>
			<el-input class="handle-input" v-model="options.res_name"></el-input>
			<label class="label" >文件类型：</label>
			<el-select
			  v-model="options.file_type" 
				filterable
				allow-create
				class="handle-input"
			   >
				<el-option
					v-for="item in options.docs"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
			</el-select>
			<div style="margin-top: 8px;">
			<!-- <label class="label" >时间范围：</label>
			<el-date-picker v-model="options.time" 
				type="daterange"
				start-placeholder="Start Date"
				end-placeholder="End Date"
				:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
				style="width: 300px;"
			></el-date-picker> -->
			<el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
			<el-row class="top-btn">
                <el-button color="#0ab394"  @click="allocation">批量分配</el-button>
                <!-- <el-button color="#e35148" @click="handleAllDelete">删除</el-button>                               -->
			</el-row>
		</div>
			
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<el-table-column  prop="res_name" label="资源名称"  ></el-table-column>
				<el-table-column  prop="up_time" label="上传时间"  ></el-table-column>
				<el-table-column prop="res_type" label="分类"></el-table-column>
				<el-table-column prop="file_type" label="类型"  width="50"></el-table-column>
                <el-table-column prop="res_size" label="资源大小"></el-table-column>
                <el-table-column  label="操作" width="50">
					<template #default="scope">
							<el-row class="right-btn">
							<el-tooltip content="分配到班级" placement="bottom" effect="light">
								<el-button color="#0ab394"  @click="downloadRes(scope.$index,scope.row)" >
									<i class="iconfont icon-export white"></i>
								</el-button>
				            </el-tooltip>
						</el-row>
					</template>
				
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				    :current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:small="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	<!-- </div> -->
		<!-- </div> -->
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getFileAdd } from '../../api/clazz' ;
const options = reactive({
	res_name:'',
	res_type:'',
	res_size:'',
	file_type:'',
	up_time:'',
	id:'',
	time:'',
	docs:[
		{
			value: '文档',
			label: '文档',
		},
	{
		value: 'text',
		label: 'text',
	},
	{
		value: 'word',
		label: 'word',
	},
	{
		value: 'sgbsb',
		label: 'sgbsb',
	},
	{
		value: 'fgv',
		label: 'fgv',
	},
	{
		value: 'excel',
		label: 'excel',
	},
	],
})

//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')

//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getFileAdd({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};

// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};

//下载
const downloadRes=(index,row)=>{
	ElMessageBox.alert('分配成功', '127.0.0.1:5173 显示', {
    confirmButtonText: '确定',
   
  })
}
const allocation=()=>{
	if (state.multipleSelection.length==0) {
		ElMessage.error('请选择项')
		return
  	}

	ElMessageBox.confirm(
    '是否确认分配',
    '127.0.0.1:5173 显示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
	)
}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 8px;
	}
}

.handle-input {
	width: 150px;
    margin-right: 8px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin: 2px 2px;
   font-weight: 700; 
}
.table {
	width: 100%;
	font-size: 13px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}
.el-col {
  border-radius: 4px;
  margin-left: 10px;
}
.el-button-group{
    float: right;
}
.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}


</style>